<template>
  <div>
    <div class="category">
      <van-grid column-num="3">
          <van-grid-item
            v-for="(item, index) in myCategory"
            :key="index"
            icon="orders-o"
            :text="item"
            @click="getBookId(index)"
          >
          </van-grid-item>
      </van-grid>
    </div>

    <div class="bookList">
      <van-card
        v-for="(item, index) in booklist"
        :key="index"
        :price="parseFloat(item.price).toFixed(2)"
        :desc="item.author"
        :title="item.name"
        :thumb="'http://localhost:8081/' + item.img"
        @click="goDetail(item.id)"
      >
        <template #tags>
          <van-tag type="danger">{{ item.category }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
import axios from "axios";

export default {
  data() {
    return {
      myCategory: [],
      booklist: [],
    };
  },
  created: function () {
    let _this = this;
    axios.get("/json/category.json").then(function (resp) {
      _this.myCategory = resp.data;
    });
    axios.get("/json/category/0.json").then(function (resp) {
      _this.booklist = resp.data;
    });
  },
  methods: {
    getBookId: function (myId) {
      let _this = this;
      axios.get("/json/category/" + myId + ".json").then(function (resp) {
        _this.booklist = resp.data;
      });
    },
    goDetail: function (id) {
        return this.$router.push(
            {
                name: 'detail',
                params:{
                    toId: id,
                }
        })
    }
  },
};
</script>

<style scoped>
.bookList {
  text-align: left;
}

.categoryItem:hover {
  transform: scale(1.2);
}
</style>